<template>
  <el-dialog
    title="预警填报"
    :visible.sync="visible"
    width="85%"
    lock-scroll
    :before-close="handleClose"
    append-to-body
  >
    <el-form :model="formData" ref="formData" label-width="100px">
      <div class="tbdx">
        <span>填报端向:</span>
        <span>北京</span>
      </div>
      <div>
        <el-checkbox v-model="checked"
          >是否对端预警(主调局可提供对端预警信息)</el-checkbox
        >
      </div>
      <div class="tbdx" style="margin-top: 10px">预警原因:</div>
      <el-row>
        <el-form-item label="电信原因:" label-width="100px">
          <el-radio-group v-model="formData.informantType" class="radio-box">
            <el-col :span="24">
              <el-radio
                style="margin-bottom: 10px"
                v-for="item in options1"
                :key="item.value"
                :value="item.value"
                :label="item.value"
                >{{ item.label }}</el-radio
              >
            </el-col>
          </el-radio-group>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="第三方原因:" label-width="100px">
          <el-radio-group v-model="formData.informantType" class="radio-box">
            <el-col :span="24">
              <el-radio
                style="margin-bottom: 10px"
                v-for="item in options2"
                :key="item.value"
                :value="item.value"
                :label="item.value"
                >{{ item.label }}</el-radio
              >
            </el-col>
          </el-radio-group>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="客户原因:" label-width="100px">
          <el-radio-group v-model="formData.informantType" class="radio-box">
            <el-col :span="24">
              <el-radio
                style="margin-bottom: 10px"
                v-for="item in options3"
                :key="item.value"
                :value="item.value"
                :label="item.value"
                >{{ item.label }}</el-radio
              >
            </el-col>
          </el-radio-group>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="IT系统原因:" label-width="100px">
          <el-radio-group v-model="formData.informantType" class="radio-box">
            <el-col :span="24">
              <el-radio
                style="margin-bottom: 10px"
                v-for="item in options4"
                :key="item.value"
                :value="item.value"
                :label="item.value"
                >{{ item.label }}</el-radio
              >
            </el-col>
          </el-radio-group>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="备注(填写补充说明):" label-width="100px">
          <el-col :span="15">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="formData.reAmountCause"
            >
            </el-input>
          </el-col>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="预计完成时间:" label-width="100px">
          <el-col :span="4">
            <el-date-picker
              v-model="formData.informantType"
              type="date"
              placeholder="选择日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
            >
              >
            </el-date-picker>
          </el-col>
          <el-col :span="8">
            <el-checkbox v-model="checked"
              >是否发起要求完成时间变更</el-checkbox
            >
          </el-col>
        </el-form-item>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      checked: false,
      formData: {},
      options1: [
        {
          value: 0,
          label: "设备采购延误",
        },
        {
          value: 1,
          label: "设备施工延误",
        },
        {
          value: 2,
          label: "客户端调测不及时",
        },
        {
          value: 3,
          label: "订单内容不完整或错误",
        },
        {
          value: 4,
          label: "本地订单录入不及时",
        },
        {
          value: 5,
          label: "两端资费分歧",
        },
        {
          value: 6,
          label: "省骨干网资源不具备",
        },
        {
          value: 7,
          label: "省骨干数据未按时配置",
        },
        {
          value: 8,
          label: "集团骨干网资源不具备",
        },
        {
          value: 9,
          label: "集团骨干数据未按时配置",
        },
        {
          value: 10,
          label: "外线施工延误",
        },
        {
          value: 11,
          label: "管线施工延误",
        },
        {
          value: 12,
          label: "设备扩容延误",
        },
        {
          value: 13,
          label: "其他原因",
        },
      ],
      options2: [
        {
          value: 0,
          label: "施工未获得市政许可",
        },
        {
          value: 1,
          label: "天气原因，无法施工",
        },
        {
          value: 2,
          label: "国际运营商原因",
        },
        {
          value: 3,
          label: "国内其他运营商原因",
        },
        {
          value: 4,
          label: "其他原因",
        },
      ],
      options3: [
        {
          value: 0,
          label: "客户机房不具备施工条件",
        },
        {
          value: 1,
          label: "客户设备不到位",
        },
        {
          value: 2,
          label: "客户未缴纳物业费，无法施工",
        },
        {
          value: 3,
          label: "客户联系不上，无法施工",
        },
        {
          value: 4,
          label: "客户自维线路原因",
        },
        {
          value: 5,
          label: "客户要求延期",
        },
        {
          value: 6,
          label: "客户要求退单",
        },
        {
          value: 7,
          label: "入场申请原因",
        },
        {
          value: 8,
          label: "物业不同意，无法施工",
        },
        {
          value: 9,
          label: "其他原因",
        },
      ],
      options4: [
        {
          value: 0,
          label: "集团CRM录单异常，完成录单后剩余开通时限无法满足施工需求",
        },
        {
          value: 1,
          label: "省CRM录单异常，完成录单后剩余开通时限无法满足施工需求",
        },
        {
          value: 2,
          label:
            "集团CRM和集团服开系统卡单，问题解决后剩余开通时限无法满足施工需求",
        },
        {
          value: 3,
          label:
            "集团服开和省服开系统卡单，问题解决后剩余开通时限无法满足施工需求",
        },
        {
          value: 4,
          label:
            "省CRM和省服开系统卡单，问题解决后剩余开通时限无法满足施工需求",
        },
        {
          value: 5,
          label: "其他原因",
        },
      ],
    };
  },

  components: {},

  computed: {},

  mounted() {},

  methods: {
    handleClose() {
      this.$emit("closeDialog");
    },
    confirmBtn() {},
    returnBtn() {},
    //改变当前页
    currentChange() {},
    //发送事件
    sendBtn() {},
    cancelBtn() {
      this.innerVisible = false;
    },
  },
};
</script>
<style lang='scss' scoped>
.tbdx {
  color: #606266;
  margin-bottom: 10px;
  font-weight: 700;
}
.radio-box {
  margin-top: 0.1rem;
  text-align: left;
}
</style>